{extend name="public/base"/}
{block name="style"}
<style type="text/css">
    .layui-card {
        padding: 20px;
    }
    .widget {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
    }
    .widget_item {
        margin-left: 20px;
    }
    .widget_item > h3 {
        font-size: 25px;
    }
    .widget_item > div {
        font-weight: 700;
    }
    .title {
        color: rgba(173, 36, 36, 1);
        font-size: 20px;
        font-weight: 700;
        font-family: Arial;
        font-style: normal;
    }
</style>
{/block}
{block name="body"}
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-rmb" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>本月订单总额</h3><br>
                            <div>{$monthTotal.price?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-cart" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>本月订单数</h3><br>
                            <div>{$monthTotal.order?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-tips" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>异常订单数</h3><br>
                            <div>{$exOrder?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-log" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>超时未处理订单数</h3><br>
                            <div>{$outTime?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        <div id="orders" style="width: auto;height:400px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header" style="border: none;"><i class="title">订单</i></div>
                    <div class="layui-card-body">
                        <table class="layui-table text-center" lay-size="sm">
                            <thead>
                            <tr>
                                <th>日期</th>
                                <th>订单总数</th>
                                <th>销售总额</th>
                            </tr>
                            </thead>
                            <tbody>
                            {foreach $table_ymd as $item}
                            <tr>
                                <td>{$item.s?:0}</td>
                                <td>{$item.order?:0}</td>
                                <td>{$item.price?:0}</td>
                            </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
    <script src="__PUBLIC__/js/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('orders'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '订单数图表',
                show: true,
                textStyle: {
                    color: 'rgba(173, 36, 36, 1)',
                    fontWeight: '700',
                    fontFamily: 'Arial',
                    fontSize: 20,
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ["line", "bar"]
                    },
                    saveAsImage: {},
                    restore: {},
                }
            },
            xAxis: {
                type: 'category',
                data: [{php}echo join(',', array_keys($graph_30_day));{/php}]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '订单数',
                data: [{php}echo join(',', $graph_30_day);{/php}],
                type: 'bar',
                smooth: true,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
{/block}